import React from 'react';
import { Button, Popconfirm } from 'antd';
import { LogoutOutlined } from '@ant-design/icons';
import { logoutWithNavigation } from '@/utils/logout';

interface LogoutButtonProps {
  type?: 'default' | 'primary' | 'dashed' | 'link' | 'text';
  size?: 'large' | 'middle' | 'small';
  danger?: boolean;
  icon?: boolean;
  text?: string;
}

const LogoutButton: React.FC<LogoutButtonProps> = ({
  type = 'default',
  size = 'middle',
  danger = true,
  icon = true,
  text = '登出'
}) => {
  return (
    <Popconfirm
      title="确定要登出吗？"
      description="登出后需要重新登录才能访问系统"
      onConfirm={logoutWithNavigation}
      okText="确定"
      cancelText="取消"
    >
      <Button 
        type={type}
        size={size}
        danger={danger}
        icon={icon ? <LogoutOutlined /> : undefined}
      >
        {text}
      </Button>
    </Popconfirm>
  );
};

export default LogoutButton;
